<style scoped>
    .list-item{height:50px;}
    .item-col{width:33%;}
    .item-col .fa{font-size:30px;color:#999;margin-left:5px;}
    .infinite-text{height:40px;line-height:40px;text-align: center;}
</style>
<template>
  <wrap title="我办理的白条会员">
    <div slot="page" class="light-bg" v-infinite-scroll="fetchData" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <router-link :to="'/detail/'+li.userId" v-for="li in list" :key=(li.userId) class="list-item flex flex-justify-between flex-align-center border-bottom padding-left padding-right border-box">
        <span class="item-col font-16" style="width:20%;">{{li.name}}</span>
        <span class="item-col" style="width:46%;">{{li.orderId}}</span>
        <div class="item-col flex flex-justify-end flex-align-center">
          <span :class="[{'green':li.status==7},{'red':li.status==3||li.status==6||li.status==8||li.status==9}]">{{li.status | statusToText}}</span>
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
      </router-link>
      <p class="infinite-text" v-if="currentPage!=totalPage">加载中...</p>
      <p class="infinite-text" v-if="currentPage==totalPage">没有更多了</p>
    </div>
  </wrap>
</template>
<script>
    /*
     * 1-等待填写资料
     * 2-正在审核详细资料
     * 3-详细资料未通过审核
     * 4-详细资料审核通过
     * 5-正在审核图片资料
     * 6-图片资料未通过审核
     * 7-申请成功
     * 8-申请失败
     * */
    import mixins from '~/mixins'
    import wrap from '../components/wrap.vue'
    import infiniteScroll from 'vue-infinite-scroll'
    export default {
      mixins: [mixins],
      components: {wrap},
      directives: {infiniteScroll},
      data () {
        return {
          currentPage: 0,
          count: 30,
          totalPage: 1,
          list: []
        }
      },
      created () {
        this.fetchData()
      },
      filters: {
        statusToText (status, isUploadCreditProtocol) {
          const map = [
            {
              status: 1,
              text: '请填写资料'
            },
            {
              status: 2,
              text: '等待审核'
            },
            {
              status: 3,
              text: '资料有误'
            },
            {
              status: 4,
              text: '请上传图片'
            },
            {
              status: 5,
              text: '等待审核'
            },
            {
              status: 6,
              text: '资料有误'
            },
            {
              status: 7,
              text: '申请成功'
            },
            {
              status: 8,
              text: '申请失败'
            },
            {
              status: 9,
              text: '未传合同照'
            }
          ]
          let re = ''
          map.forEach(item => {
            if (item.status === status) {
              re = item.text
            }
          })
          return re
        }
      },
      methods: {
        fetchData () {
          const self = this
          if (self.currentPage === self.totalPage) {
            return
          }
          self.currentPage++
          self.request({act: 'getList', body: {current: self.currentPage, size: self.count}}).then(res => {
            if (res.code === 0) {
              self.currentPage = res.data.current
              self.totalPage = res.data.total
              self.list = self.list.concat(res.data.list)
            }
          })
        }
      }
    }
</script>
